<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :placeholder="true" :active="'about'"/>
    <div class="page-main">
      <h1 class="main-title">新闻中心</h1>
      <div class="news-tabs">
        <div class="news-tab hv-opacity" :class="{'active': curCateId == 0}" @click="changeCattegory(0)">全部新闻</div>
        <div class="news-tab hv-opacity" v-for="(item, index) in cateList" :key="index" :class="{'active': curCateId == item.id}" @click="changeCattegory(item.id)">{{ item.title }}</div>
      </div>
      <div class="news-main">
        <div class="news-left">
          <div class="news-list">
            <a :href="'news_detail.html?id=' + item.id" class="news-item hv-scale" v-for="(item, index) in list" :key="index">
              <div class="news-photo">
                <img oncontextmenu="return false" :src="item.photo" class="photo fit-img" alt="">
              </div>
              <div class="news-info">
                <span class="news-tag flex-center"  :style="`background: ${item.cate_info.color || '#FC5821'};`">{{ item.cate_info.title }}</span>
                <span class="news-date">{{ item.create_time }}</span> 
              </div>
              <div class="news-title">
                {{ item.title }}
              </div>
              <div class="news-desc">
                {{ item.titles }}
              </div>
            </a>
          </div>
          <div class="empty-box flex-center" v-if="hasResult && list.length == 0">
            <img oncontextmenu="return false" src="@/assets/images/empty.png" class="empty-photo" alt="">
            <div class="empty-text">暂无数据</div>
          </div>
        </div>
        <div class="news-right">
          <a :href="'news_detail.html?id=' + item.id" class="rec-card hv-scale" v-for="(item, index) in hotNews" :key="index">
            <div class="photo">
              <img oncontextmenu="return false" :src="item.photo" class="fit-img" alt="">
            </div>
            <div class="news-info">
              <span class="news-tag flex-center" :style="`background: ${item.cate_info.color || '#FC5821'};`">{{ item.cate_info.title }}</span>
              <span class="news-date">{{ item.create_time }}</span> 
            </div>
            <div class="news-title">
              {{ item.title }}
            </div>
            <div class="news-desc">
              {{ item.titles }}
            </div>
          </a>
        </div>
      </div>
    </div>
    <FooterBar />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { hideLoading, getUrlParams } from '@/utils/utils'
import { getNewsCategories, getNewsList, getHotNewsList } from '@/api/news' 

import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'

const theme = ref('white')
const curCateId = ref(0)
const cateList = ref([])
const list = ref([])
const total = ref(0)
const hotNews = ref([])
const hasResult = ref(false)

onMounted(() => {
  if (getUrlParams('type')) {
    curCateId.value = getUrlParams('type')
  }
  loadCategoryList()
  loadNewsList('init')
  loadHotNews()
  hideLoading()
  const wow = new WOW({
    scrollContainer: '.page',
    offset: 100
  })
  wow.init()
});

const loadCategoryList = () => {
  getNewsCategories().then(res => {
    cateList.value = res.data
  })
}

const loadHotNews = () => {
  getHotNewsList().then(res => {
    hotNews.value = res.data
  })
};

const loadNewsList = (type) => {
  if (type == 'init') {
    list.value = []
    hasResult.value = false
    total.value = 0
  }
  const params = {
    cate_id: curCateId.value == 0 ? '' : curCateId.value,
  }
  getNewsList(params).then(res => {
    list.value = list.value.concat(res.data)
    total.value = res.total
    hasResult.value = true
  })
};

const changeCattegory = (id) => {
  curCateId.value = id
  loadNewsList('init')
};

</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden
}
.page-main {
  padding: 3.75rem /* 60/16 */ 10rem /* 160/16 */ 3.125rem /* 50/16 */;
  min-height: calc(100vh - 4.375rem /* 70/16 */);
  width: 87.5rem /* 1400/16 */;
  margin: 0 auto;
  max-width: 92%;
}
.main-title {
  text-align: center;
  font-weight: 500;
  color: #000000;
  font-size: 2.625rem /* 42/16 */;
  line-height: 1;
}
.news-main {
  margin: 3.125rem /* 50/16 */ auto 0;
  display: flex;
  justify-content: space-between;
}
.news-left {
  width: 60%;
}
.news-right {
  width: 28.6%;
}
.news-tabs {
  display: flex;
  border-bottom: 1px solid #F2F2F2;
  width: 100%;
  margin-top: 3.125rem /* 50/16 */;
}
.news-tab {
  display: inline-flex;
  padding-bottom: .9375rem /* 15/16 */;
  font-size: 1.25rem /* 20/16 */;
  color: #595757;
  font-size: 1rem /* 16/16 */;
  line-height: 1;
  &+.news-tab {
    margin-left: 3.4375rem /* 55/16 */;
  }
  &.active {
    position: relative;
    color: #E50012;
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 2px;
      background-color: #E50012;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
}
.news-item {
  display: block;
  &+.news-item {
    margin-top: 4.375rem /* 70/16 */;
  }
  .news-photo {
    overflow: hidden;
  }
  .photo {
    width: 100%;
    height: auto;
  }
  .news-info {
    margin-top: 1.25rem /* 20/16 */;
    display: flex;
    align-items: center;
  }
  .news-tag {
    padding: .3125rem /* 5/16 */ .375rem /* 6/16 */;
    background: #E50012;
    font-size: .625rem /* 10/16 */;
    color: #FFFFFF;
    font-weight: 500;
    margin-right: .75rem /* 12/16 */;
  }
  .news-date {
    font-size: .75rem /* 12/16 */;
    line-height: 1;
    color: #595757;
  }
  .news-title {
    margin-top: .9375rem /* 15/16 */;
    font-size: 2.125rem /* 34/16 */;
    text-align: justify;
    color: #000000;
    line-height: 3.125rem /* 50/16 */;
    font-weight: 500;
  }
  .news-desc {
    margin-top: 1.375rem /* 22/16 */;
    font-size: 1.125rem /* 18/16 */;
    line-height: 1.875rem /* 30/16 */;
    color: #595757;
  }
}
.rec-card {
  display: block;
  &+.rec-card {
    margin-top: 5.625rem /* 90/16 */;
  }
  .photo {
    width: 100%;
    height: auto;
  }
  .news-info {
    margin-top: 1.25rem /* 20/16 */;
    display: flex;
    align-items: center;
  }
  .news-tag {
    padding: .3125rem /* 5/16 */ .375rem /* 6/16 */;
    background: #FC5821;
    font-size: .625rem /* 10/16 */;
    color: #FFFFFF;
    font-weight: 500;
    margin-right: .75rem /* 12/16 */;
  }
  .news-date {
    font-size: .75rem /* 12/16 */;
    line-height: 1;
    color: #595757;
  }
  .news-title {
    margin-top: 1.25rem /* 20/16 */;
    font-size: 1.25rem /* 20/16 */;
    text-align: justify;
    color: #000000;
    line-height: 1.875rem /* 30/16 */;
    font-weight: 500;
  }
  .news-desc {
    margin-top: 1.375rem /* 22/16 */;
    font-size: .9375rem /* 15/16 */;
    line-height: 1.5625rem /* 25/16 */;
    color: #595757;
  }
}
.empty-box {
  padding: 4.375rem /* 70/16 */ 0;
  flex-direction: column;
  .empty-photo {
    width: 19.125rem /* 306/16 */;
  }
  .empty-text {
    font-size: .9375rem /* 15/16 */;
    color: #888888;
  }
}
</style> 